<template>
    <div id="write-container">
        <div class="title">
            <input style="border:0;" v-model="title" placeholder="请输入标题..." type="text">
            <div>
                <el-checkbox-group class="checkList" v-model="checkList">
                    <el-checkbox label="前端" />
                    <el-checkbox label="后端" />
                    <el-checkbox label="算法" />
                    <el-checkbox label="面试" />
                </el-checkbox-group>
            </div>
            <el-button type="primary" class="submit" @click="publish">发布文章</el-button>
        </div>
        <div class="content">
            <textarea class="editor" v-model="text"></textarea>
            <v-md-preview class="preview" :text="text"></v-md-preview>
        </div>
    </div>

</template>
  
<script lang="ts" setup>
import { ref } from "@vue/reactivity";
import { create } from "../axios/index"
import { useUserStore } from "../store/user";
import { ElMessage } from 'element-plus'
import router from "../router";
const userStore = useUserStore()

let checkList = ref([])

let text = ref('')
let title = ref('')
interface article {
    title: string
    text: string
    check: string[]
    time: Date,
    userName: string
}
const publish = () => {

    const check = Array.from(checkList.value)

    if (text.value.length === 0 || title.value.length == 0 || checkList.value.length === 0) {
        ElMessage({
            showClose: true,
            message: '标题，内容,分类不能为空',
            type: 'warning',
        })
        return
    }
    const data: article = {
        title: title.value,
        text: text.value,
        check,
        time: new Date(),
        userName: userStore.userName
    }
    create(data).then((res) => {
        setTimeout(() => {
            router.push('home')
        }, 500)
    })

}
</script>

<style scoped>
#write-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.title {
    width: 80%;
    height: 60px;
    display: flex;
    align-items: center;
}

.title input {
    width: 100%;
    outline: 0;
    text-decoration: none;
    padding-left: 50px;
    padding-right: 30px;
    font-size: 30px;
}

.title span {
    margin-right: 20px;
    font-size: 32px;
}

.title .submit {
    position: absolute;
    right: 50px;
}

.checkList {
    display: flex;
}

.content {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
}

.editor,
.preview {
    flex: 1;
    border: 1px solid #000;
    height: 100%;
    outline: none;
    overflow: scroll;
}

.editor {
    padding: 20px;
    font-size: 22px;
    resize: none;
}

.preview {
    padding: 20px;
}
</style>

